<!-- 积分列表 -->
<template>
	<view class="integral-list">
		<view v-for="(item, index) in scoreArr" :key="index" class="integral-item">
			<view class="flex-between">
				<view>{{ item.memo }}</view>
				<view :class="['score', { reduce: item.before > item.after }]">{{ item.score }}</view>
			</view>
			
			<view class="date">{{ formatDateTime(item.create_time * 1000) }}</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { computed, onMounted, ref } from 'vue';
	import { getUserScoreData } from '@/api/user'
	import { formatDateTime } from '@/utils'
	import { useUserStore } from '@/store/user'
	
	const userStore = useUserStore()
	const scoreArr = ref<Record<string, any>>([])
	
	onMounted(() => {
		getScoreList()
	})
	// 获取最新积分更新时间
	const firstDate = computed(() => {
		const { create_time = 0 } = { ...scoreArr.value[0] }
		console.log(create_time)
		return formatDateTime(create_time === 0 ? new Date().getTime() : create_time * 1000, 'YYYYMMDD')
	})
	
	function getScoreList() {
		getUserScoreData().then(res => {
			scoreArr.value = res
			
			userStore.scoreUpdateTime = firstDate.value
			console.log(userStore.scoreUpdateTime)
		})
	}
</script>

<style lang="scss" scoped>
	.integral-list {
		padding-top: 5px;
		.integral-item {
			padding-top: 32px;
			padding-bottom: 7px;
			border-bottom: 1px solid #E5E5E5;
			font-size: 16px;
			font-weight: bold;
			
			.flex-between {
				color: #23282C;
				> view {
					flex-shrink: 0;
				}
				.score {
					color: $uni-tabbar-color;
					
					&.reduce {
						color: #0BADA2;
					}
				}
			}
			
			.date {
				padding-top: 6px;
				color: #989898;
				line-height: 20px;
			}
		}
	}
</style>